<template>
	<view class="content page-bg" id="guide-container">
		<mask-guide-uni ref="maskGuide">
			<button slot='nextButton' class="guide-next" style="">我知道啦~</button>
		</mask-guide-uni>
		<!--  #ifdef  MP-WEIXIN -->
		<div class="title" :style="{'paddingTop': statusBarHeight + 'px','height':menuBarHeight + 'px'}">
			<image src="../../static/back.svg" class="logo" mode="" @click="back"></image>
		</div>
		<!-- #endif -->
		<div class="user-avatar" :class="{'vip-circle':userInfo.vip}">
			<img v-if="userInfo.vip" src="../../static/vip.svg" alt="" srcset="" class="vip-logo" @click="showExpire">
			<img :src="userInfo.avatar" alt="avatar" class="avatar">
		</div>

		<div class="user-name">{{userInfo.nickname}}</div>
		<div class="user-data">
			<div class="user-data-item" @click="showReward" id="guide_0" data-guide-text="点击查看金币详情">
				<div class="user-data-num">{{userInfo.coin}}</div>
				<div class="user-data-title">金币
					<img src="../../static/help.svg" class="coin-help" alt="" srcset="">
				</div>
			</div>
			<div class="user-data-item" @click="showHistoryPop" id="guide_1" data-guide-text="点击查看历史场次">
				<div class="user-data-num">{{count}}</div>
				<div class="user-data-title">历史场次
					<img src="../../static/next.svg" class="coin-help" alt="" srcset="">
				</div>
			</div>
		</div>
		<div class="me-page-settings">
			<div class="me-page-settings-box">
				<div class="settings-item" id="guide_2" data-guide-text="点击修改昵称">
					<div class="setting-item-left">
						<img src="../../static/username_icon.svg" alt="" srcset="" class="me-page-setting-icon">
						<text>用户名</text>
					</div>
					<div class="setting-item-right" @click="showNickNamePop">
						<text class="nickname-input"> {{userInfo.nickname}}</text>
						<img src="../../static/next.svg" alt="" srcset="" class="me-page-setting-icon">

					</div>
				</div>
			</div>
		</div>
		<div class="me-page-settings">
			<div class="me-page-settings-box">
				<!-- <div class="settings-item" @click="showTestAddVIP">
					<div class="setting-item-left">
						<img src="../../static/vip_flat.svg" alt="" srcset="" class="me-page-setting-icon">
						<text>免费VIP</text>
					</div>
					<div class="setting-item-right">

						<img src="../../static/next.svg" alt="" srcset="" class="me-page-setting-icon">

					</div>
				</div> -->
				<div class="settings-item" @click="showBindPop" id="guide_3" data-guide-text="点击绑定给手机">
					<div class="setting-item-left">
						<img src="../../static/phone.svg" alt="" srcset="" class="me-page-setting-icon">
						<text>绑定手机</text>
						<PopTooltip message="绑定手机之后可以在电脑端查看实时记录" style="margin-left: 8upx;"></PopTooltip>
					</div>
					<div class="setting-item-right">
						<text v-if="userInfo.mobile">已绑定</text>
						<img v-else src="../../static/next.svg" alt="" srcset="" class="me-page-setting-icon">

					</div>
				</div>
				<div class="settings-item" @click="showAboutusPop">
					<div class="setting-item-left">
						<img src="../../static/about_icon.svg" alt="" srcset="" class="me-page-setting-icon">
						<text>联系我们</text>
					</div>
					<div class="setting-item-right">
						<!-- <text>TT!</text> -->
						<img src="../../static/next.svg" alt="" srcset="" class="me-page-setting-icon">

					</div>
				</div>
			</div>
		</div>
		<RewardPopup ref="rewardPop" :coin="userInfo.coin" @show="showRewardRecordPopup"></RewardPopup>
		<RewardRecordPopup ref="rewardRecordPopup"></RewardRecordPopup>
		<HistoryPopup ref="historyPopup" @onDetail="showHistoryDetailPopup"> </HistoryPopup>
		<HistoryDetailPopup ref="historyDetailPopup" :detail="currentHistoryList"></HistoryDetailPopup>
		<AboutusPopup ref="aboutusPopup"></AboutusPopup>
		<UpdatePhonePopup ref="updatePhonePopup" @showVerify="showVerify"></UpdatePhonePopup>
		<uni-popup type="center" ref="nickname">
			<view class="nickname">
				<div class="header">
					<img @click="closeNickname" src="../../static/close.svg" class="close-icon" alt="" srcset="">
					<text class="header-title">修改用户名</text>
				</div>

				<input type="nickname" placeholder="请输入昵称" v-model="nickName" class="user-name-input" />
				<button class="contact-btn" @click="changeNickname">
					确定
				</button>
			</view>
		</uni-popup>
		<Verify @success="getCode" :mode="'pop'" :captchaType="'blockPuzzle'"
			:imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify>
	</view>
</template>

<script>
	import AboutusPopup from "../../components/AboutusPopup.vue"
	import HistoryPopup from "../../components/HistoryPopup.vue"
	import HistoryDetailPopup from "../../components/HistoryDetailPopup.vue"
	import RewardPopup from "../../components/RewardPopup.vue"
	import RewardRecordPopup from "../../components/RewardRecordPopup.vue"
	import UpdatePhonePopup from "../../components/UpdatePhonePopup.vue"
	import PopTooltip from "../../components/PopTooltip.vue"
	import Verify from "../../components/verifition/Verify"
	import {
		updateAvatar,
		updateNickname
	} from '../../api/user'
	import {
		getHistoryCount,
		getRoomHistoryDetail
	} from '../../api/room'

	import {
		testAddVip
	} from "../../api/wallet"
	const app = getApp();
	import maskGuideUni from "../../components/mask-guide-uni/mask-guide-uni.vue"
	export default {
		data() {
			return {
				menuBarHeight: app.globalData.menuBarHeight,
				statusBarHeight: app.globalData.statusBarHeight,
				nickName: "",
				vip: true,
				count: 0,
				currentHistoryList: [],
				guideKey: 'meGuide'
			}
		},
		components: {
			RewardPopup,
			RewardRecordPopup,
			HistoryPopup,
			AboutusPopup,
			UpdatePhonePopup,
			HistoryDetailPopup,
			PopTooltip,
			Verify,
			maskGuideUni
		},
		onLoad() {
			this.nickName = this.userInfo.nickname
			this.getHistoryCount()
			// if (!uni.getStorageSync(this.guideKey)) {
			// 	this.showGuideMask()
			// 	uni.setStorageSync(this.guideKey, true)
			// }
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo
			},

		},
		methods: {
			showGuideMask() {
				this.$refs.maskGuide.start({
					textStyle: {
						fontSize: '24upx',
					},
					showNextButton: true
				})
			},
			showTestAddVIP() {
				var that = this
				uni.showModal({
					content: "确定免费添加VIP（测试期间使用）",
					confirmText: "确定",
					success: function(res) {
						if (res.confirm) {
							testAddVip().then(result => {
								that.$store.dispatch('ObtainUserInfo').then(result => {})

							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

			},
			showVerify() {
				this.$refs.verify.show()
			},
			getCode(captchaParams) {
				console.log("getCode", captchaParams)
				this.$refs.updatePhonePopup.getCode(captchaParams)
			},
			showHistoryDetailPopup(roomId) {
				getRoomHistoryDetail({
					roomId: roomId
				}).then(result => {
					this.currentHistoryList = result.data
					this.$refs.historyDetailPopup.open()
				})
			},
			showBindPop() {
				if (!this.userInfo.mobile) {
					this.$refs.updatePhonePopup.open()
				}

			},
			showNickNamePop() {
				this.$refs.nickname.open()
			},
			showExpire() {
				uni.showModal({
					showCancel: false,
					confirmText: "知道了",
					content: `您的VIP将在${this.parseTime(this.userInfo.vipExpireTime,"{y}-{m}-{d}")}失效`
				})
			},
			changeNickname() {
				if (this.nickName !== this.userInfo.nickname) {
					updateNickname({
						nickname: this.nickName
					}).then(res => {
						this.userInfo.nickname = this.nickName
						this.$store.commit('SET_USER_INFO', this.userInfo)
						this.$refs.nickname.close()

					})
				} else {
					this.$refs.nickname.close()
				}
			},
			closeNickname() {
				this.$refs.nickname.close()
			},
			back() {
				uni.navigateBack()
			},
			showReward() {
				this.$refs.rewardPop.open()
			},
			showRewardRecordPopup() {
				console.log("showRewardRecordPopup", this.$refs.rewardRecordPopup)
				this.$refs.rewardRecordPopup.open()
			},
			showHistoryPop() {
				this.$refs.historyPopup.open()
			},
			showAboutusPop() {
				this.$refs.aboutusPopup.open()
			},
			getHistoryCount() {
				getHistoryCount().then(result => {
					this.count = result.data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content::before {
		content: "";
		clear: both;
		display: table;
	}

	.content {
		position: relative;
		height: 100vh;
		width: 100vw;

		.guide-next {
			background-color: transparent;
			width: 100%;
			height: 50upx;
			font-size: 20upx;
			color: white;
		}

		.guide-next::after {
			border-color: white;
		}

		.title {
			width: 100%;
			display: flex;
			align-items: center;

			.logo {
				width: 40upx;
				margin-left: 40upx;
			}

			.brand {
				font-size: 40upx;
				color: black;
				margin-left: 20upx;
				font-weight: bolder;
			}


		}

		.vip-circle {
			border: 4upx #FFB743 solid !important;
		}

		.user-avatar {
			align-items: center;
			background-color: #fff;
			border-radius: 100%;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .4);
			display: flex;
			height: 170upx;
			justify-content: center;
			padding: 0;
			width: 170upx;
			border: 4upx white solid;
			margin-top: 40upx;
			margin-left: auto;
			margin-right: auto;
			position: relative;

			.vip-logo {
				width: 50upx;
				height: 50upx;
				position: absolute;
				bottom: -10upx;
				right: -10upx;

			}

			.avatar {
				width: 170upx;
				height: 170upx;
				border-radius: 100%;
			}
		}

		.user-name {
			font-size: 40upx;
			font-weight: 700;
			margin: 0 auto;
			overflow: hidden;
			padding: 32upx;
			text-overflow: ellipsis;
			width: 360upx;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
		}

		.user-data {
			display: flex;

			justify-content: space-around;
			padding: 0 16upx 16upx 0;
			margin-left: auto;
			margin-right: auto;

			.user-data-item {
				display: flex;
				flex-direction: column;
				width: 50%;
				align-items: center;

				.user-data-num {
					font-size: 40upx;
					font-weight: 700
				}

				.user-data-title {
					color: #00000050;
					font-size: 24upx;
					display: flex;
					align-items: center;
					margin-top: 8upx;

					.coin-help {
						height: 24upx;
						width: 24upx;
						margin-left: 8upx;
					}
				}
			}
		}

		.me-page-settings {
			margin-left: 40upx;
			margin-right: 40upx;
			padding: 32upx 0;

			.me-page-settings-box {
				border-radius: 32upx;

				overflow: hidden;

				.settings-item {
					align-items: center;
					background-color: #fff;
					display: flex;
					justify-content: space-between;
					padding: 32upx 32upx;

					.setting-item-left {
						display: flex;
						align-items: center;

						.me-page-setting-icon {
							width: 50upx;
							height: 50upx;
							margin-right: 20upx;
						}
					}

					.setting-item-right {
						display: flex;
						align-items: center;

						.me-page-setting-icon {
							width: 50upx;
							height: 50upx;
							margin-left: 20upx;
						}

						.nickname-input {
							text-align: right;
						}
					}


				}
			}
		}

		.nickname {
			background-color: white;
			width: 600upx;
			border-radius: 30upx;
			padding-top: 24upx;
			padding-bottom: 12upx;
			padding-left: 12upx;
			padding-right: 12upx;

			background-color: #f2f7ff;

			.header {
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;


				.header-title {
					font-size: 30upx;
					font-weight: bolder;
				}

				.close-icon {
					width: 40upx;
					height: 40upx;
					position: absolute;
					left: 24upx;
					top: 20upx;
				}

			}

			.user-name-input {
				background-color: #fff;
				border-radius: 12upx;
				box-shadow: 0 5upx 10upx 0 rgba(0, 0, 0, .05);
				font-size: 40upx;
				font-weight: 600;
				height: 100upx;
				line-height: 100upx;
				text-align: center;
				width: 100%;
			}

			.contact-btn {
				font-size: 34upx;
				height: 80upx;
				line-height: 80upx;
				margin: 40upx auto;
				width: 96%;
				background-color: $uni-color-primary;
				color: white;
				border-radius: 8upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

	}
</style>